import React, {useEffect, useState} from 'react';
import {Table,Select} from 'antd';
import {connect} from 'umi';
import {assessGradeList} from "@/utils/constant";

const {Option} = Select;

const DetailedTable = (props) => {

  const {onCompute} = props;
  const [data,setData] = useState([]);
  const monthData = [
    {title: '1月', align: 'center', dataIndex: 'oneMonth'},
    {title: '2月', align: 'center', dataIndex: 'twoMonth'},
    {title: '3月', align: 'center', dataIndex: 'threeMonth'},
    {title: '一季度', align: 'center', dataIndex: 'oneQuarterly'},
    {title: '半年', align: 'center', dataIndex: 'halfYear'},
    {title: '三季度', align: 'center', dataIndex: 'threeQuarterly'},
    {
      title: '本次绩效', align: 'center', dataIndex: 'performance',width:'12%',
      render: (text, record) => {
        return (
          <Select placeholder="请选择" value={text} onChange={(e) => updateRow(e, record.key)}>
            {assessGradeList.map((item, index) => {
              return (
                <Option value={`${item.value}`} key={item.value}>
                  {item.label}
                </Option>
              )
            })}
          </Select>
        )
      },
    },
  ];
  const columns = [
    {
      title: '排名（根据平均分排序）',
      align: 'center',
      dataIndex: 'rank',
    },
    {
      title: '工号',
      align: 'center',
      dataIndex: 'code',
    },
    {
      title: '姓名',
      align: 'center',
      dataIndex: 'name',
    },
    {
      title: '平均分数',
      align: 'center',
      dataIndex: 'fraction',
    },
  ];

  monthData?.forEach((item,index) => {
    columns.push(item)
  });

  const getRowByKey = (key, newData) => (newData || data)?.filter((item) => item.key === key)[0];

  const updateRow = (e,key) => {
    const newData = [...data];
    const target = getRowByKey(key, newData);
    if (target) {
      target['performance'] = e;
      setData(newData);
      onCompute(newData);
    }
  };


  useEffect(() => {
    let temp = [
      {
        key: 1,
        rank: 1,
        code: 'zt00001',
        name: 'czw',
        fraction: 98,
        oneMonth: 78,
        twoMonth: 82,
        threeMonth: 87,
        oneQuarterly: 'B',
        halfYear: 'A',
        threeQuarterly: 'A'
      },
      {
        key: 2,
        rank: 2,
        code: 'zt00002',
        name: '全浩伟',
        fraction: 65,
        oneMonth: 70,
        twoMonth: 72,
        threeMonth: 75,
        oneQuarterly: 'A',
        halfYear: 'B',
        threeQuarterly: 'A'
      }
    ];
    setData(temp);
  }, []);

  return (
    <Table
      rowKey='name'
      dataSource={data}
      columns={columns}
      pagination={false}
    />
  )
};

export default connect(() => ({}))(DetailedTable);
